<template>
  <view class="container" @touchmove.stop.prevent="moveHandle">
    <view class="header">
      <image class="image" :src="userInfo.avatar" />
      <view class="right">
        <view class="name">{{ userInfo.name }}</view>
        <view class="address">{{ userInfo.address }}</view>
      </view>
    </view>
    <view class="content">
      <view class="item" v-for="item in menuList" :key="item.name" @tap="toLink(item.url)">
        <view class="left">
          <image class="image" :src="item.icon" />
          <view>{{ item.name }}</view>
        </view>
        <view class="line">{{ '>' }}</view>
      </view>
    </view>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      userInfo: {
        name: '大耳朵图图',
        avatar: '/static/images/userIcon.png',
        address: '山东省淄博市张店区'
      },
      menuList: [{
        name: '个人资料',
        icon: '/static/user/1.png',
        url: '/pages/user/info'
      }, {
        name: '学生信息',
        icon: '/static/user/2.png',
        url: '/pages/user/demo'
      }, {
        name: '我的志愿表',
        icon: '/static/user/3.png',
        url: "/pages/user/preferences"
      }]
    };
  },
  methods: {
    moveHandle() {
      return false
    },
    toLink(url) {
      uni.navigateTo({ url })
    }
  }
};
</script>
  
<style lang="less" scoped>
.header {
  padding: 40upx 30upx;
  display: flex;
  background-color: #fff;
  height: 230upx;

  .image {
    width: 140upx;
    height: 140upx;
  }

  .right {
    padding: 30upx;

    .name {
      font-size: 32upx;
      font-weight: 600;
    }

    .address {
      padding-top: 10upx;
      font-size: 24upx;
      color: #999;
    }
  }
}

.content {
  padding: 30upx;
  background-color: #fff;
  margin-top: 10upx;
  overflow: hidden;
  height: 100vh;

  .item {
    display: flex;
    justify-content: space-between;
    height: 100upx;
    line-height: 50upx;
    padding: 25upx 0;
    border-bottom: 1upx solid#ececec;

    .left {
      display: flex;

      .image {
        width: 50upx;
        height: 50upx;
        margin-right: 30upx;
      }
    }
  }
}
</style>